654r654r630rr654r654r630rr654r654r630rr654r654r630rr<template>
  <div class="swiper">
    <div class="home_swiper">
      <div
        class="swiper_box"
        :style="{ transform: 'translateX(' + translateX + 'rpx)' }"
      >
        <div
          class="swiper_content"
          @touchstart="touchstart"
          @touchend="touchend"
          @touchmove="touchMove"
          v-for="obj in swiperList"
          :key="obj.id"
        >
          <div class="doctor_photograph"></div>
          <div class="doctor_msg">
            <div class="doctor_name">{{ obj.name }}</div>
            <div class="doctor_neighbourhood">{{ obj.neighbourhood }}</div>
            <div class="doctor_week">{{ obj.week }}</div>
            <div class="doctor_time">
              {{ obj.startTime }} - {{ obj.endTime }} {{ obj.unit }}
            </div>
            <div class="doctor_phone"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper_indicator">
      <ul>
        <li
          v-for="(i, index) in swiperList"
          :key="i.id"
          :class="{ li_active: swiperListIndex === index }"
        ></li>
      </ul>
    </div>
  </div>
</template>

<script>
import touch from "../../utils/touch";
export default {
  data() {
    return {
      swiperListIndex: 0,
      swiperList: [
        {
          id: 1,
          img: "",
          name: "Dr. Rir Kandowen",
          neighbourhood: "Child Specialist",
          week: "Today",
          startTime: "14:30",
          endTime: "15:30",
          unit: "AM",
          phone: "17674519105",
        },
        {
          id: 2,
          img: "",
          name: "Dr. Richar Kandowen",
          neighbourhood: "Child Specialist",
          week: "Today",
          startTime: "14:30",
          endTime: "15:30",
          unit: "AM",
          phone: "17674519105",
        },
        {
          id: 3,
          img: "",
          name: "Dr. Richar Kandowen",
          neighbourhood: "Chilialist",
          week: "Today",
          startTime: "14:30",
          endTime: "15:30",
          unit: "AM",
          phone: "17674519105",
        },
      ],
      translateX: 0,
    };
  },
  methods: {
    touchstart(e) {
      touch.touchStart(e);
    },
    touchend(e) {
      const direction = touch.touchEnd(e);
      if (!direction) return;
      if (direction === "left") {
        if (this.translateX === 0) {
          this.swiperListIndex = this.swiperList.length - 1;
          this.translateX = -(this.swiperList.length - 1) * 327 * 2;
        } else {
          this.swiperListIndex--;
          this.translateX += 327 * 2;
        }
      } else {
        if (this.translateX === -(this.swiperList.length - 1) * 327 * 2) {
          this.translateX = 0;
          this.swiperListIndex = 0;
        } else {
          this.swiperListIndex++;
          this.translateX += -327 * 2;
        }
      }
    },
    touchMove(e) {
      // console.log(Math.abs(this.translateX));
      // if(Math.abs(this.translateX)>=Math.abs(this.swiperList.length*327))this.translateX =  0
      // this.translateX+=  touch.touchMove(e)
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  position: relative;
}
.home_swiper {
  overflow: hidden;
  display: flex;
  margin-top: 48rpx;
  width: 654rpx;
  height: 348rpx;

  .swiper_box {
    display: flex;
    height: 348rpx;
    transition: all 1s;
  }

  .swiper_content {
    position: relative;
    display: flex;
    width: 654rpx;
    padding: 34rpx;
    height: 300rpx;
    background: rgb(23, 23, 37);
    border-radius: 30rpx;
    box-sizing: border-box;

    .doctor_photograph {
      width: 186rpx;
      height: 230rpx;
      background: rgb(217, 217, 217);
      border-radius: 30rpx;
    }
    .doctor_msg {
      padding-top: 6rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 30rpx;
      color: rgb(254, 254, 254);
      font-family: Plus Jakarta Sans;
      letter-spacing: 0.004999999888241291%;
      text-align: left;

      .doctor_name {
        font-size: 32rpx;
        font-weight: 600;
        line-height: 48rpx;
      }

      .doctor_neighbourhood {
        margin-top: -30rpx;
        font-size: 24rpx;
        font-weight: 500;
        line-height: 40rpx;
      }

      .doctor_week,
      .doctor_time {
        font-size: 24rpx;
        font-weight: 600;
        /* 自动布局 */
        display: flex;
        flex-direction: row;
        // justify-content: center;
        align-items: center;

        &::before {
          content: "";
          width: 26rpx;
          height: 28.66rpx;
          margin-right: 6rpx;
          background: url("../../static/images/home/Calendar.png") no-repeat;
        }
      }

      .doctor_time {
        &::before {
          background: url("../../static/images/home/TimeCircle.png") no-repeat;
        }
      }

      .doctor_phone {
        position: absolute;
        right: 60rpx;
        bottom: 30rpx;
        width: 60rpx;
        height: 60rpx;
        background: rgb(254, 254, 254);
        box-shadow: 0rpx 40rpx 100rpx rgba(124, 115, 195, 0.15);
        border-radius: 50%;

        &::after {
          content: "";
          position: absolute;
          background: rgb(18, 25, 66);
          top: 50%;
          left: 50%;
          width: 40rpx;
          height: 40rpx;
          transform: translate(-50%, -50%);
          background: url("../../static/images/home/bxs-phone.png") no-repeat;
        }
      }
    }
  }
}

.swiper_indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 48rpx;

  ul {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    li {
      width: 16rpx;
      height: 16rpx;
      background: rgb(226, 226, 226);
      border-radius: 50%;
      margin: 0 8rpx;
    }

    .li_active {
      width: 48rpx;
      height: 16rpx;
      background: rgb(18, 25, 66);
      border-radius: 200rpx;
    }
  }
}
</style>